
<template>
  <article class="page">
    <section class="head-wrap">
      <div class="header">
        <div class="logo">
          <img src="../../../../static/images/dangjian/home/logo.png" alt="">
        </div>
        <div class="head-bd">

        </div>
        <div class="message"><img src="../../../../static/images/dangjian/home/icon-msg.png" alt=""></div>
      </div>
    </section>

    <section class="frame-content bg-light-gray">

      <ul class="top-menu">
        <li class="width-auto"><span>首页</span></li>
        <li class="width-auto"><span>红云头条</span></li>
        <li class="active width-auto"><span>音视频</span></li>
        <li class="width-auto"><span>需求调查</span></li>
      </ul>

      <ul class="btn-menu pdh-10">
        <li class="active width-auto"><span>党建短视频</span></li>
        <li class=" width-auto"><span>党建长视频</span></li>
        <li class=" width-auto"><span>党建电台</span></li>
      </ul>

      <section class="video-wrap">
        <video src=""></video>
      </section>

    </section>
    <footerbar></footerbar>
  </article>
</template>


<script>
  export default {
    name: 'longVideo'
  }
</script>


<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";

  .home-banner-wrap {
    background:rgba(255,255,255,0.9);
    height:pxToRem(350px);
    width:100%;
    .home-banner {
      position: relative;
      @include fullImg();

      .text {
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        color:#fff;
        padding:5px 8px;
        overflow:hidden;
      }
      img {
        @include fullImg();
      }
    }
  }

  .home-icon-btns {
    background:rgba(255,255,255,0.9);
    padding:pxToRem(54px) 0 pxToRem(40px);
    .icon-btns {
      .item {
        .img {
          margin-bottom:pxToRem(14px);
        }
      }
    }
  }

  .scroll-imgs {
    background:rgba(255,255,255,0.9);
    padding: pxToRem(20px);
    padding-top: 0;
    overflow-y:auto;
    ul {
      display:flex;
    }
    li {
      width: pxToRem(496px);
      height:pxToRem(198px);
      flex-shrink: 0;
      border:1px solid rgba(255, 183, 183, 1);
      box-shadow:0px 4px 6px 0px rgba(54,0,0,0.23);
      margin-right: pxToRem(20px);
      &:last-child {
        /*margin-right:0;*/
      }
      img {
        @include fullImg();
      }
    }
  }

  .platform {
    background:rgba(255,255,255,0.9);
    margin:pxToRem(30px) 0;
    padding:pxToRem(30px) pxToRem(37px);
    h2 {
      font-size:pxToRem(26px);
      font-family:Microsoft YaHei;
      font-weight:400;
      color:rgba(0,0,0,1);
      margin-bottom: pxToRem(30px);
      .more-text {
        color:$theme-color;
        font-size:pxToRem(20px);
        float:right;
      }
    }
    .list-squareness {
      display:flex;
      justify-content: space-between;
      li {
        width:pxToRem(210px);
        height:pxToRem(210px);
        background:rgba(255,250,241,1);
        box-shadow:0px 4px 6px 0px rgba(54,0,0,0.1);
        border-radius:pxToRem(6px);
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction:column;
        img {
          width:pxToRem(98px);
          height:pxToRem(98px);
          border-radius:100%;
          margin-bottom:pxToRem(12px);
        }
      }
    }
  }

</style>


